<template>
<view class="main">
	<view class="science-tabbar">
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 0 }" @click="selectTab(0)">热门推荐</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 1 }" @click="selectTab(1)">家纺布艺</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 2 }" @click="selectTab(2)">家庭装饰</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 3 }" @click="selectTab(3)">厨房用品</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 4 }" @click="selectTab(4)">灯具灯饰</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 5 }" @click="selectTab(5)">厨房家电</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 6 }" @click="selectTab(6)">影音休闲家电</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 7 }" @click="selectTab(7)">清洁家电</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 8 }" @click="selectTab(8)">气温调节家电</view>
	  <view class="tabbar-item" :class="{ 'selected': selectedItem === 9 }" @click="selectTab(9)">浴室家电</view>
	</view>
	<scroll-view class="science-lists" scroll-y="true" >
		<view>
			<p class="lists-title">{{title}}</p>
			<science-list-custom></science-list-custom>
		</view>
	</scroll-view>
</view>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
	  title:''
    };
  },
  methods: {
    selectTab(index) {
      this.selectedItem = index;
	  this.title = this.getTabValue(index)
    },
    getTabValue(index) {
      // 模拟获取某一项的值的逻辑，你可以根据实际情况替换成真实的数据
      const tabValues = ['热门推荐', '家纺布艺', '家庭装饰', '厨房用品', '灯具灯饰', '厨房家电', '影音休闲家电', '清洁家电', '气温调节家电', '浴室家电'];
      return tabValues[index];
    },
  },
};
</script>

<style>
.main{
	display: flex;
}
.science-tabbar {
  width: 36%;
  height: 100vh;
  background-color: #f9f9f9;
}

.tabbar-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  cursor: pointer;
}

.selected {
  font-weight: bold;
  background-color: aqua;
}
.science-lists{
	width: 64%;
	background-color: antiquewhite;
}
.lists-title{
	margin-top: 40rpx;
	font-size: 40rpx;
	text-indent: 20rpx;
	font-weight: bold;
}
</style>
